<template>
  <div class="box">
    <van-nav-bar
      title="个人中心"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="changeMsg_photo">
      <van-uploader :after-read="afterRead" max-count="1" preview-size="0.75rem" :deletable="false">
        <van-image class="image_box" round width="0.75rem" height="0.75rem" :src="uservia" />
        <p>点击修改头像</p>
      </van-uploader>
    </div>
    <div class="changeMsg_usernickname changeMsg_user">
      <span>昵称</span>
      <van-icon class="icon" name="arrow" />
      <input type="text" :value="usernickname" @change="changeNickname">
    </div>
    <div class="changeMsg_usersex changeMsg_user">
      <span>性别</span>
      <van-icon class="icon" name="arrow" @click="change_usersex" />
      <b @click="change_usersex" v-if="usersex === '0'">未设置</b>
      <b @click="change_usersex" v-else-if="usersex === '1'">男</b>
      <b @click="change_usersex" v-else>女</b>
      <van-popup v-model="show_sex" position="bottom" :style="{ height: '2.64rem' }">
        <van-area :area-list="areaList" :columns-num="1" confirm-button-text="确定" cancel-button-text="性别" @confirm="confirm_sex" />
      </van-popup>
    </div>
    <div class="changeMsg_usertimer changeMsg_user">
      <span>生日</span>
      <van-icon class="icon" name="arrow" @click="change_usertimer" />
      <b @click="change_usertimer">{{usertimer}}</b>
      <van-calendar v-model="show_timer" :min-date="minDate" :max-date="maxDate" @confirm="confirm_timer" />
    </div>
    <div class="changeMsg_usersignature changeMsg_user">
      <span>个人简介</span>
      <van-icon class="icon" name="arrow" />
      <input type="text" :value="usersignature" @change="changeSignature">
    </div>
    <button class="changeMessage_button" @click="changeUserMessage">提交修改</button>
  </div>
</template>

<script>
import { getUserMessage, changeUserMessage } from '../../api'
import Vue from 'vue'
import { NavBar, Icon, Uploader, Image, Popup, Area, Calendar, Toast } from 'vant'
Vue.use(Icon)
Vue.use(Uploader)
Vue.use(NavBar)
Vue.use(Image)
Vue.use(Popup)
Vue.use(Area)
Vue.use(Calendar)
Vue.use(Toast)
export default {
  data () {
    return {
      show_sex: false,
      show_timer: false,
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(2100, 12, 31),
      usernickname: '',
      usersex: '',
      uservia: '',
      usertimer: '',
      usersignature: '',
      areaList: {
        province_list: {
          0: '未设置',
          1: '男',
          2: '女'
        }
      }
    }
  },
  mounted () {
    getUserMessage({
      username: localStorage.getItem('userTel_AM'),
      token: localStorage.getItem('token_AM')
    }).then(res => {
      if (res.data.code === '200') {
        this.usernickname = res.data.data[0].usernickname === '用户昵称' ? '请设置昵称' : res.data.data[0].usernickname
        this.usersex = res.data.data[0].usersex
        this.uservia = res.data.data[0].uservia
        this.usertimer = res.data.data[0].usertimer === '' ? '请选择' : res.data.data[0].usertimer
        this.usersignature = res.data.data[0].usersignature
      } else if (res.data.code === '400') {
        Toast('您的身份认证已过期，请重新登录')
        setTimeout(() => {
          this.$router.push('/login')
        }, 700)
      }
    })
  },
  methods: {
    changeUserMessage () {
      const { usernickname, usersex, uservia, usertimer, usersignature } = this
      const userobj = {
        username: localStorage.getItem('userTel_AM'),
        token: localStorage.getItem('token_AM'),
        usernickname,
        usersex,
        uservia,
        usertimer,
        usersignature
      }
      changeUserMessage({ userobj }).then(res => {
        // console.log(res)
        if (res.data.code === '200') {
          Toast('信息修改成功')
          setTimeout(() => {
            this.$router.replace('/user')
          }, 800)
        } else if (res.data.code === '400') {
          Toast('您的身份认证已过期，请重新登录')
          setTimeout(() => {
            this.$router.push('/login')
          }, 700)
        }
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    },
    afterRead (file) {
      this.uservia = file.content
    },
    changeNickname (e) {
      this.usernickname = e.target.value
    },
    change_usersex () {
      this.show_sex = true
    },
    change_usertimer () {
      this.show_timer = true
    },
    changeSignature (e) {
      this.usersignature = e.target.value
    },
    confirm_sex (e) {
      this.usersex = e[0].name === '未设置' ? '0' : e[0].name === '男' ? '1' : '2'
      this.show_sex = false
    },
    confirm_timer (e) {
      const d = new Date(e)
      const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
      this.usertimer = resDate
      this.show_timer = false
    },
    p (s) {
      return s < 10 ? '0' + s : s
    }
  }
}
</script>

<style lang="scss" scoped>
.changeMsg_photo {
  width: 100%;
  height: 1.26rem;
  text-align: center;
  padding: 0.12rem 0;
  p {
    font-size: 0.12rem;
    color: #464646;
    line-height: 0.42rem;
  }
}
.changeMsg_usernickname {
  input {
    max-width: 1.5rem;
    padding: 0 0.08rem;
    height: 0.6rem;
    color: #8e8e8e;
    font-size: 0.14rem;
    border: none;
    float: right;
    text-align: right;
  }
}
.changeMsg_usersignature {
  input {
    max-width: 1.5rem;
    padding: 0 0.08rem;
    height: 0.6rem;
    color: #8e8e8e;
    font-size: 0.14rem;
    border: none;
    float: right;
    text-align: right;
  }
}
.changeMsg_usersex {
  b {
    float: right;
    height: 0.6rem;
    line-height: 0.6rem;
    color: #8e8e8e;
    font-size: 0.14rem;
    text-align: right;
    padding: 0 0.08rem;
    font-weight: normal;
  }
}
.changeMsg_usertimer {
  b {
    float: right;
    height: 0.6rem;
    line-height: 0.6rem;
    color: #8e8e8e;
    font-size: 0.14rem;
    text-align: right;
    padding: 0 0.08rem;
    font-weight: normal;
  }
}
.changeMsg_user {
  width: 100%;
  height: 0.6rem;
  padding: 0 0.2rem;
  border-bottom: 1px solid #f5f5f5;
  span {
    float: left;
    font-size: 0.16rem;
    line-height: 0.6rem;
    color: #464646;
  }
  .icon {
    float: right;
    font-size: 0.16rem;
    line-height: 0.6rem;
  }
}
.changeMessage_button {
  width: 2.26rem;
  height: 0.44rem;
  background: #ffe7e8;
  border-radius: 0.05rem;
  border: none;
  line-height: 0.44rem;
  font-size: 0.16rem;
  color: #464646;
  text-align: center;
  margin: 0.36rem auto;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #555555;
}
/deep/ .van-nav-bar__title {
  font-size: 0.18rem;
  color: #464646;
}
.image_box {
  border: 0.02rem solid #F7B450;
  border-radius: 50%;
  width: 0.6rem!important;
  height: 0.6rem!important;
}
/deep/ .van-picker__cancel {
  color: #464646;
  font-size: 0.16rem;
}
/deep/ .van-picker__confirm {
  color: #464646;
  font-size: 0.16rem;
}
</style>
